<template>
  <div>
    <video
      ref="videoRef"
      src="@/assets/video.mp4"
      controls
      autoplay
      muted
      loop
    ></video>
    <button @click="handleClickToImage">截图下载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClickToImage() {
      // 创建canvas
      const canvas = document.createElement("canvas");
      const video = this.$refs.videoRef;
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      // 绘制上下文
      const ctx = canvas.getContext("2d");
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      console.log(canvas.toDataURL("image/png"));
      const imageUrl = canvas.toDataURL("image/png");
      this.downloadUrl(imageUrl);
    },
    downloadUrl(dataUrl) {
      const link = document.createElement("a");
      link.href = dataUrl;
      link.download = "截图";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(dataUrl);
    },
  },
};
</script>

<style scoped></style>
